import React from "react";
import type { FormProps } from "antd";
import { Button, Checkbox, Form, Input, Select } from "antd";
import { useNavigate } from "react-router-dom";

type FieldType = {
  username?: string;
  password?: string;
  remember?: string;
};

const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
  console.log("Success:", values);
};

const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
  console.log("Failed:", errorInfo);
};

const App: React.FC = () => {
  const navigate = useNavigate();
  const login = () => {
    navigate("/login");
  };
  return (
    <Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ maxWidth: 600 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item<FieldType>
        label="商户名称"
        name="username"
        rules={[{ required: true, message: "请输入商户名称" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item<FieldType>
        label="联系人"
        name="person"
        rules={[{ required: true, message: "请输入联系人" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item<FieldType>
        label="手机号"
        name="phone"
        rules={[{ required: true, message: "请输入手机号" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item<FieldType>
        label="验证码"
        name="code"
        rules={[{ required: true, message: "请输入验证码" }]}
      >
        <div className="flex *:mr-2">
          <Input />
          <Button type="primary">获取验证码</Button>
        </div>
      </Form.Item>

      <Form.Item<FieldType>
        label="密码"
        name="password"
        rules={[{ required: true, message: "请输入密码" }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item<FieldType>
        label="确认密码"
        name="password2"
        rules={[{ required: true, message: "请输入密码" }]}
      >
        <Input.Password />
      </Form.Item>

      <Form.Item<FieldType>
        label="经营模式"
        name="model"
        rules={[{ required: true, message: "请输入密码" }]}
      >
        <Select
          defaultValue="选择经营模式"
          options={[
            { value: "选择经营模式", label: "选择经营模式" },
            { value: "快餐（连锁）", label: "快餐（连锁）" },
            { value: "快餐（单店）", label: "快餐（单店）" },
            { value: "正餐（连锁）", label: "正餐（连锁）" },
            { value: "正餐（单店）", label: "正餐（单店）" },
          ]}
        />
      </Form.Item>

      <Form.Item<FieldType>
        label="门店地址"
        name="address"
        rules={[{ required: true, message: "请输入密码" }]}
      >
        <Input />
      </Form.Item>

      <div className="flex justify-center">
        <Checkbox />
        <div>
          我同意
          <span className="text-blue-500">
            《饭盟智慧云SaaS餐饮服务平台》注册协议
          </span>
        </div>
      </div>

      <div className="w-400px ml-40 mt-5 flex justify-center">
        <Button type="primary" className="w-full h-10" htmlType="submit">
          注册
        </Button>
      </div>
      <div
        onClick={login}
        className="text-end text-blue-500 mt-2 cursor-pointer"
      >
        已经有账户了？点此登录
      </div>
    </Form>
  );
};

export default App;
